<script setup>
import { useConsultStore } from '@/stores';
import { createOrderPre, getConsultOrderPre, getConsultPay } from '@/apis/consult';
import { ref } from 'vue';
import { getPatientDetail } from '@/apis/user';
const store=useConsultStore()

//定义预支付订单响应式数据
const orderPre=ref({})
//获取预支付订单数据
	const getOrderPre=async()=>{
		const res=await getConsultOrderPre(store.consult.type)
		// console.log(res);
		orderPre.value=res.data
	}
	getOrderPre()
	
	
//获取患者信息
const patientInfo=ref({})
const getPatientDetailInfo=async()=>{
	uni.showLoading({
		title:'正在加载中...'
	})
	const res= await getPatientDetail(store.consult.patientId)
  uni.hideLoading()
	patientInfo.value=res.data
}
getPatientDetailInfo()

//我同意
const isAgree=ref(false)
//是否勾选我同意
const onAgree=()=>{
	isAgree.value=!isAgree.value
	console.log(isAgree.value);
}


const isLoading=ref(false)
//获取组件对象
const popupRef=ref(null)

//生成订单id
const orderId=ref('')
//生成待支付订单
const onPay=async()=>{
	if(!isAgree.value) return uni.showToast({
		icon:'none',
		title:'请勾选我同意'
	})
	if(orderId.value!==''){
		return uni.showToast({
			icon:'none',
			title:'订单不能重复创建!'
		})
	}
	isLoading.value=true
	//处理图片数据
	if(store.consult.pictures.length){
		 store.consult.pictures=store.consult.pictures.map(item=>({id:item.uuid,url:item.url}))
	}
	const res=await createOrderPre({...store.consult})
	orderId.value=res.data.id
	//清除pinia患者信息
	store.clearConsult()
	isLoading.value=false
	//打开弹出层
	popupRef.value.popupOpen()
}

//点击关闭按钮
const onClose=async()=>{
	const res = await uni.showModal({
	    title: '关闭支付',
	    content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
	    cancelText: '仍要关闭',
	    cancelColor: '#848484',
	    confirmText: '继续支付',
	    confirmColor: '#16C2A3'
	  })
		//如果是取消按钮关闭弹出层
	  if (!res.confirm){
			popupRef.value.popupClose()
			}
}
//定义支付方式
const paymentMethod=ref(1)
//保存支付方式
const onChoose=(val)=>{
	paymentMethod.value=val.paymentMethod
}

//立即支付
const onConfirm=async()=>{
	const res= await getConsultPay({
		paymentMethod:paymentMethod.value,
		orderId:orderId.value,
		payCallback:'http://localhost:5173/#/subpkg_consult/room/index'
		})
		window.location.href=res.data.payUrl
}
</script>

<template>
  <scroll-page v-if="orderPre&&patientInfo">
    <view class="payment-page">
      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        :title="`图文问诊 ${orderPre.payment}元`"
      >
        <uni-list :border="false">
          <uni-list-item
            title="极速问诊"
            note="自动分配医生"
            thumb="/static/uploads/doctor-avatar.jpg"
            thumb-size="lg"
          />
          <uni-list-item title="优惠券" show-arrow :right-text="`-¥ ${orderPre.couponDeduction?.toFixed(2)}`" />
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red">-¥{{orderPre.pointDeduction?.toFixed(2)}}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{orderPre.actualPayment?.toFixed(2)}}</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view class="dividing-line"></view>

      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        title="患者资料"
      >
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray"> {{patientInfo.name}} | {{patientInfo.genderValue}} | {{patientInfo.age}}岁 </view>
            </template>
          </uni-list-item>
          <uni-list-item border title="病情描述" :note="store.consult.illnessDesc" />
        </uni-list>
      </uni-section>

      <view class="payment-agreement">
        <radio color="#20c6b2" @click="onAgree" :checked="isAgree"/>
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount">
        合计: <text class="number">¥{{orderPre.actualPayment?.toFixed(2)}}</text>
      </view>
      <button :loadig="isLoading" class="uni-button" @click="onPay">立即支付</button>
    </view>
  </scroll-page>
   <custom-payment ref="popupRef" :orderId="orderId" :amount="orderPre.actualPayment?.toFixed(2)" @close="onClose" @confirm="onConfirm"></custom-payment>
</template>

<style lang="scss">
@import './index.scss';
</style>